<script setup lang="ts">
import {onMounted, reactive, ref} from "vue";
import {globalData, goalTableForm, goalTableRef, tableSetForm} from '../data'
import {getTableField} from "@/api/libraryTable";
import {v4 as uuidv4} from 'uuid';

const emits = defineEmits(['next', 'top', 'goBack', 'goBackSet', 'setTask', 'close'])
//去除警告
const other = () => {
  emits('next');
  emits('top');
  emits('goBack');
  emits('goBackSet');
  emits('setTask');
  emits('close');
}

const next = async () => {
  let validate = await goalTableRef.value.validate()
  if (validate) {
    emits('next');
  }
}
const top = () => {
  emits('top');
}
const state = reactive({
  defaultProps: {
    children: 'children',
    label: 'label',
  },
})
onMounted(() => {
  setInitData()
})
const radio = ref(2)
const setInitData = () => {
  goalTableRef?.value?.resetFields()
  if (globalData.type == 'add') {
    for (let key in goalTableForm.tableData) {
      if (key == 'field') {
        goalTableForm.tableData[key] = [];
      } else if (key == 'targeName') {
        goalTableForm.tableData[key] = goalTableForm.tableData[key]
      } else if (key == 'writerType') {
        goalTableForm.tableData[key] = 'insert'
      } else if (key == 'differentField') {
        goalTableForm.tableData.differentField = []
        let id = uuidv4()
        let obj = {
          id,
          value: '',
          rules1: [],
          rules2: []
        }
        goalTableForm.tableData.differentField.push(obj)
      } else if (key == 'convertField') {
        goalTableForm.tableData.convertField = []
        let id = uuidv4()
        let obj = {
          id,
          value: '',
        }
        goalTableForm.tableData.convertField.push(obj)
      } else if (key == 'dateField') {
        goalTableForm.tableData.dateField = []
        let id = uuidv4()
        let obj = {
          id,
          value: '',
        }
        goalTableForm.tableData.dateField.push(obj)
      } else {
        goalTableForm.tableData[key] = null;
      }
    }
  } else {

  }
  if (goalTableForm.tableData.writerType == 'update') {
    radio.value = 1
  } else {
    radio.value = 2
  }

}

const getTableFieldList = async () => {
  let params = {tableId: goalTableForm.tableData.targetTable,};
  let res = await getTableField(params);
  if (res) {
    goalTableForm.tableFieldList = res.data
    goalTableForm.tableData.targetCloumn = []//清空字段详情勾选
    res.data.forEach((item) => {
      item.label = `${item.name}:${item.cname}(${item.fieldType})`
      //设置勾选
      goalTableForm.tableData.targetCloumn.push(item.id)
    })
  }
}

const tableChange = () => {
  getTableFieldList()
}
//新增异字段
const addField = () => {
  let id = uuidv4()
  let obj = {
    id,
    value: '',
    rules1: [],
    rules2: []
  }
  goalTableForm.tableData.differentField.push(obj)
}

const deleteField = (item, index) => {
  goalTableForm.tableData.differentField.splice(index, 1)
  // goalTableForm.tableData.differentField.forEach((ret, i) => {
  //   if (ret.id == item.id) {
  //     goalTableForm.tableData.differentField.splice(i, 1)
  //   }
  // })
}
const dataAddFormatId = () => {
  let id = uuidv4()
  let obj = {
    id,
    value: '',
  }
  goalTableForm.tableData.dateField.push(obj)
}

const dataDeleteFormatId = (item, index) => {
  goalTableForm.tableData.dateField.splice(index, 1)
  // goalTableForm.tableData.convertField.forEach((ret, i) => {
  //   if (ret.id == item.id) {
  //     goalTableForm.tableData.convertField.splice(i, 1)
  //   }
  // })
}


const dataAddField = () => {
  let id = uuidv4()
  let obj = {
    id,
    value: '',
  }
  goalTableForm.tableData.convertField.push(obj)
}

const dataDeleteField = (item, index) => {
  goalTableForm.tableData.convertField.splice(index, 1)
  // goalTableForm.tableData.convertField.forEach((ret, i) => {
  //   if (ret.id == item.id) {
  //     goalTableForm.tableData.convertField.splice(i, 1)
  //   }
  // })
}


//源头字段
const filteredTableFieldList = computed(() => {
  return tableSetForm.tableFieldList.filter(item => {
    return tableSetForm.tableData.sourceCloumn.includes(item.id);
  });
})
//目标字段
const targetFilteredTableFieldList = computed(() => {
  return goalTableForm.tableFieldList.filter(item => {
    return goalTableForm.tableData.targetCloumn.includes(item.id);
  }).map(item => {
    return {
      ...item,
      label: `${item.name}:${item.cname}(${item.fieldType})`
    };
  });
})

const fieldChange = (item, type, props) => {
  if (type == 1) { //源头
    if (item.source == '' || item.source == undefined) {
      item.rules2 = []
      goalTableRef.value.clearValidate(props)
    } else {
      item.rules2 = [{required: true, message: '请选择', trigger: ['blur', 'change']}]
    }
  } else {//目标
    if (item.target == '' || item.target == undefined) {
      item.rules1 = []
      goalTableRef.value.clearValidate(props)
    } else {
      item.rules1 = [{required: true, message: '请选择', trigger: ['blur', 'change']}]
    }
  }

}
const formatIdChange = (item, type, index) => {
  if (item.fieldName == '' || item.fieldName == undefined) {
    item.rules2 = []
    goalTableRef.value.clearValidate(`dateField[${index}].format`)
  } else {
    item.rules2 = [{required: true, message: '请输入', trigger: ['blur', 'change']}]
  }

  if (item.format == '' || item.format == undefined) {
    item.rules1 = []
    goalTableRef.value.clearValidate(`dateField[${index}].fieldName`)
  } else {
    item.rules1 = [{required: true, message: '请选择', trigger: ['blur', 'change']}]
  }

}
let rules = ref({
  targetTable: [
    {required: true, message: '请输入', trigger: ['blur', 'change']}
  ],
  writerType: [
    {required: true, message: '请选择', trigger: ['blur', 'change']}
  ],
  updateField: [
    {required: true, message: '请选择', trigger: ['blur', 'change']}
  ],
  value1: [],
  oldData: [],
})

const checkBoxChange = () => {
  console.log(goalTableForm.tableData.targetCloumn, 'goalTableForm.tableData.targetCloumn')
  const targetFieldSet = new Set(goalTableForm.tableData.targetCloumn);
  console.log(targetFieldSet, 'targetFieldSet')
  goalTableForm.tableData.differentField.forEach((item, index) => {
    if (!targetFieldSet.has(item.target)) {
      item.target = null;
      item.rules1 = []
      goalTableRef.value.clearValidate(`differentField[${index}].target`)
      goalTableRef.value.clearValidate(`differentField[${index}].source`)
    }
  });

  goalTableForm.tableData.convertField.forEach((ret) => {
    if (!targetFieldSet.has(ret.fieldName)) {
      ret.fieldName = null;
      ret.oldData = null;
      ret.newData = null;
      ret.rules1 = []
      ret.rules2 = []
      ret.rules3 = []
    }
  });
  goalTableForm.tableData.updateField.forEach((res, i) => {
    if (!targetFieldSet.has(res)) {
      goalTableForm.tableData?.updateField?.splice(i, 1)
    }
  });

  goalTableForm.tableData.dateField.forEach((item, index) => {
    if (!targetFieldSet.has(item.fieldName)) {
      item.fieldName = null;
      item.rules2 = []
      goalTableRef.value.clearValidate(`dateField[${index}].fieldName`)
      goalTableRef.value.clearValidate(`dateField[${index}].format`)
    }
  });

};

const dataChange = (item, type, index) => {
  if (type == 1) {
    if (item.fieldName == '' || item.fieldName == undefined) {
      if (item.oldData == '' || item.oldData == undefined) {
        item.rules2 = []
      }
      if (item.newData == '' || item.newData == undefined) {
        item.rules3 = []
      }
      goalTableRef.value.clearValidate(`convertField[${index}].oldData`)
      goalTableRef.value.clearValidate(`convertField[${index}].newData`)
      if (item.oldData || item.newData) {
        item.rules1 = [{required: true, message: '不能为空', trigger: ['blur', 'change']}]
      } else {
        goalTableRef.value.clearValidate(`convertField[${index}].fieldName`)
        item.rules1 = []
      }
    } else {
      item.rules2 = [{required: true, message: '不能为空', trigger: ['blur', 'change']}]
      item.rules3 = [{required: true, message: '不能为空', trigger: ['blur', 'change']}]

      if (item.oldData || item.newData) {
        item.rules1 = [{required: true, message: '不能为空', trigger: ['blur', 'change']}]
      }
    }
  } else if (type == 2) {
    if (item.oldData == '' || item.oldData == undefined) {
      if (item.fieldName == '' || item.fieldName == undefined) {
        item.rules1 = []
      }
      if (item.newData == '' || item.newData == undefined) {
        item.rules3 = []
      }
      goalTableRef.value.clearValidate(`convertField[${index}].fieldName`)
      goalTableRef.value.clearValidate(`convertField[${index}].newData`)
      if (item.fieldName || item.newData) {
        item.rules2 = [{required: true, message: '不能为空', trigger: ['blur', 'change']}]
      } else {
        goalTableRef.value.clearValidate(`convertField[${index}].oldData`)
        item.rules2 = []
      }
    } else {
      item.rules1 = [{required: true, message: '不能为空', trigger: ['blur', 'change']}]
      item.rules3 = [{required: true, message: '不能为空', trigger: ['blur', 'change']}]

      if (item.fieldName || item.newData) {
        item.rules2 = [{required: true, message: '不能为空', trigger: ['blur', 'change']}]
      }
    }
  } else {
    if (item.newData == '' || item.newData == undefined) {
      if (item.fieldName == '' || item.fieldName == undefined) {
        item.rules1 = []
      }
      if (item.oldData == '' || item.oldData == undefined) {
        item.rules2 = []
      }

      goalTableRef.value.clearValidate(`convertField[${index}].fieldName`)
      goalTableRef.value.clearValidate(`convertField[${index}].oldData`)
      if (item.fieldName || item.oldData) {
        item.rules3 = [{required: true, message: '不能为空', trigger: ['blur', 'change']}]
      } else {
        goalTableRef.value.clearValidate(`convertField[${index}].newData`)
        item.rules3 = []
      }
    } else {
      item.rules1 = [{required: true, message: '不能为空', trigger: ['blur', 'change']}]
      item.rules2 = [{required: true, message: '不能为空', trigger: ['blur', 'change']}]

      if (item.fieldName || item.oldData) {
        item.rules3 = [{required: true, message: '不能为空', trigger: ['blur', 'change']}]
      }
    }
  }

}
const radioChange = (e) => {
  if (e == 'update') {
    radio.value = 1
  } else {
    radio.value = 2
  }
  goalTableForm.tableData.updateField = ''
}
let ruleFormRef = ref(goalTableRef)
</script>
<template>
  <el-form
      ref="ruleFormRef"
      :model="goalTableForm.tableData"
      :rules="rules">

    <el-descriptions border :column="1">
      <el-descriptions-item label-align="center">
        <template #label>
          <div>
            <span>表名称</span>
            <span class="y9-required-icon">*</span>
          </div>
        </template>
        <el-form-item prop="targetTable">
          <el-select
              @change="tableChange"
              v-model="goalTableForm.tableData.targetTable"
              class="m-2"
              placeholder="请选择表"
              size="small"
          >
            <el-option
                v-for="item in goalTableForm.tableOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-descriptions-item>
      <el-descriptions-item label-align="center" label="字段详情">
        <template #label>
          <div>
            <span>字段详情</span>
            <!--            <span class="y9-required-icon">*</span>-->
          </div>
        </template>
        <el-form-item>
          <el-checkbox-group v-model="goalTableForm.tableData.targetCloumn" class="field">
            <div v-for="item in goalTableForm.tableFieldList" class="type">
              <el-checkbox @change="checkBoxChange" v-model="item.id" :label="item.id">
                {{ item.name }}:{{ item.cname }}({{ item.fieldType }})
              </el-checkbox>
            </div>
          </el-checkbox-group>
        </el-form-item>
      </el-descriptions-item>
      <el-descriptions-item label-align="center" label="执行类">
        <template #label>
          <div>
            <span>执行类</span>
            <span class="y9-required-icon">*</span>
          </div>
        </template>
        <el-form-item prop="targeName">
          <el-select
              v-model="goalTableForm.tableData.targeName"
              class="m-2"
              value-key="id"
              placeholder="请选择"
              size="small"
          >
            <el-option
                v-for="item in goalTableForm.classListOptions"
                :key="item.id"
                :label="item.className"
                :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-descriptions-item>
      <el-descriptions-item label-align="center" label="输出类型">
        <template #label>
          <div>
            <span>输出类型</span>
            <span class="y9-required-icon">*</span>
          </div>
        </template>
        <el-form-item prop="writerType">
          <el-radio-group v-model="goalTableForm.tableData.writerType" @change="radioChange">
            <el-radio :label="'insert'">新增（insert）</el-radio>
            <el-radio :label="'update'">更新（update）</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-descriptions-item>
      <div v-if="goalTableForm.tableData.writerType=='update'">
        <el-descriptions-item label-align="center" label="更新字段">
          <template #label>
            <div>
              <span>更新字段</span>
              <span class="y9-required-icon">*</span>
            </div>
          </template>
          <el-form-item prop="updateField">
            <el-tree-select
                node-key="id"
                v-model="goalTableForm.tableData.updateField"
                :data="targetFilteredTableFieldList"
                :props="state.defaultProps"
                multiple
                placeholder="请选择更新字段"
                size="small"
                filterable
                :render-after-expand="false"
                check-strictly
                check-on-click-node
                show-checkbox
            >
            </el-tree-select>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label-align="center" label="异字段同步">
          <template #label>
            <div>
              <span>异字段同步</span>
              <!--            <span class="y9-required-icon">*</span>-->
            </div>
          </template>
          <div class="sync" v-for="(items,index) in goalTableForm.tableData.differentField">
            <div class="w100">
              <el-form-item :rules="items.rules1" :prop="`differentField[${index}].source`">
                <el-select
                    v-model="items.source"
                    value-key="id"
                    clearable
                    placeholder="请选择源头字段"
                    size="small"
                    @change="fieldChange(items,1,`differentField[${index}].target`)"

                >
                  <el-option
                      v-for="item in filteredTableFieldList"
                      :key="item.id"
                      :label="`${item.name}:${item.cname}(${item.fieldType})`"
                      :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </div>
            <div class="seg"> -</div>
            <div class="w100">
              <el-form-item :rules="items.rules2" :prop="`differentField[${index}].target`">
                <el-select
                    v-model="items.target"
                    value-key="id"
                    placeholder="请选择目标字段"
                    size="small"
                    clearable
                    @change="fieldChange(items,2,`differentField[${index}].source`)"

                >
                  <el-option
                      v-for="item in targetFilteredTableFieldList"
                      :key="item.id"
                      :label="`${item.name}:${item.cname}(${item.fieldType})`"
                      :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </div>
            <div class="icon" @click="addField">
              <el-icon size="20">
                <CirclePlus/>
              </el-icon>
            </div>
            <div class="icon" v-if="goalTableForm.tableData.differentField.length>1" @click="deleteField(items,index)">
              <el-icon size="20">
                <CircleClose/>
              </el-icon>
            </div>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label-align="center" label="日期格式转换">
          <template #label>
            <div>
              <span>日期格式转换</span>
              <!--            <span class="y9-required-icon">*</span>-->
            </div>
          </template>
          <div class="sync" v-for="(items,index) in goalTableForm.tableData.dateField">
            <div class="w100">
              <el-form-item :rules="items.rules1" :prop="`dateField[${index}].fieldName`">
                <el-select
                    clearable
                    v-model="items.fieldName"
                    value-key="id"
                    placeholder="请选择转换字段"
                    size="small"
                    @change="formatIdChange(items,1,index)"
                >
                  <el-option
                      v-for="item in targetFilteredTableFieldList"
                      :key="item.id"
                      :label="`${item.name}:${item.cname}`"
                      :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </div>
            <div class="seg">-</div>
            <div class="w100">
              <el-form-item :rules="items.rules2" :prop="`dateField[${index}].format`">
                <el-input @change="formatIdChange(items,2,index)" clearable
                          placeholder="请输入" v-model="items.format"></el-input>
              </el-form-item>
            </div>
            <div class="icon" @click="dataAddFormatId">
              <el-icon size="20">
                <CirclePlus/>
              </el-icon>
            </div>
            <div class="icon" v-if="goalTableForm.tableData.dateField.length>1"
                 @click="dataDeleteFormatId(items,index)">
              <el-icon size="20">
                <CircleClose/>
              </el-icon>
            </div>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label-align="center" label="数据转换">
          <template #label>
            <div>
              <span>数据转换</span>
              <!--            <span class="y9-required-icon">*</span>-->
            </div>
          </template>
          <div class="sync" v-for="(items,index) in goalTableForm.tableData.convertField">
            <div class="w100">
              <el-form-item :rules="items.rules1" :prop="`convertField[${index}].fieldName`">
                <el-select
                    clearable
                    v-model="items.fieldName"
                    value-key="id"
                    placeholder="请选择转换字段"
                    size="small"
                    @change="dataChange(items,1,index)"
                >
                  <el-option
                      v-for="item in targetFilteredTableFieldList"
                      :key="item.id"
                      :label="`${item.name}:${item.cname}`"
                      :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </div>
            <div class="seg">:</div>
            <div class="w100">
              <el-form-item :rules="items.rules2" :prop="`convertField[${index}].oldData`">
                <el-input @change="dataChange(items,2,index)" clearable
                          placeholder="原始数据" v-model="items.oldData"></el-input>
              </el-form-item>
            </div>
            <div class="seg">-</div>
            <div class="w100">
              <el-form-item :rules="items.rules3" :prop="`convertField[${index}].newData`">
                <el-input clearable @change="dataChange(items,3,index)"
                          placeholder="更新数据" v-model="items.newData"></el-input>
              </el-form-item>
            </div>
            <div class="icon" @click="dataAddField">
              <el-icon size="20">
                <CirclePlus/>
              </el-icon>
            </div>
            <div class="icon" v-if="goalTableForm.tableData.convertField.length>1"
                 @click="dataDeleteField(items,index)">
              <el-icon size="20">
                <CircleClose/>
              </el-icon>
            </div>
          </div>
        </el-descriptions-item>
      </div>
      <div v-else>
        <el-descriptions-item label-align="center" label="异字段同步">
          <template #label>
            <div>
              <span>异字段同步</span>
              <!--            <span class="y9-required-icon">*</span>-->
            </div>
          </template>
          <div class="sync" v-for="(items,index) in goalTableForm.tableData.differentField">
            <div class="w100">
              <el-form-item :rules="items.rules1" :prop="`differentField[${index}].source`">
                <el-select
                    v-model="items.source"
                    value-key="id"
                    clearable
                    placeholder="请选择源头字段"
                    size="small"
                    @change="fieldChange(items,1,`differentField[${index}].target`)"

                >
                  <el-option
                      v-for="item in filteredTableFieldList"
                      :key="item.id"
                      :label="`${item.name}:${item.cname}(${item.fieldType})`"
                      :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </div>
            <div class="seg"> -</div>
            <div class="w100">
              <el-form-item :rules="items.rules2" :prop="`differentField[${index}].target`">
                <el-select
                    v-model="items.target"
                    value-key="id"
                    placeholder="请选择目标字段"
                    size="small"
                    clearable
                    @change="fieldChange(items,2,`differentField[${index}].source`)"

                >
                  <el-option
                      v-for="item in targetFilteredTableFieldList"
                      :key="item.id"
                      :label="`${item.name}:${item.cname}(${item.fieldType})`"
                      :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </div>
            <div class="icon" @click="addField">
              <el-icon size="20">
                <CirclePlus/>
              </el-icon>
            </div>
            <div class="icon" v-if="goalTableForm.tableData.differentField.length>1" @click="deleteField(items,index)">
              <el-icon size="20">
                <CircleClose/>
              </el-icon>
            </div>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label-align="center" label="日期格式转换">
          <template #label>
            <div>
              <span>日期格式转换</span>
              <!--            <span class="y9-required-icon">*</span>-->
            </div>
          </template>
          <div class="sync" v-for="(items,index) in goalTableForm.tableData.dateField">
            <div class="w100">
              <el-form-item :rules="items.rules1" :prop="`dateField[${index}].fieldName`">
                <el-select
                    clearable
                    v-model="items.fieldName"
                    value-key="id"
                    placeholder="请选择转换字段"
                    size="small"
                    @change="formatIdChange(items,1,index)"
                >
                  <el-option
                      v-for="item in targetFilteredTableFieldList"
                      :key="item.id"
                      :label="`${item.name}:${item.cname}`"
                      :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </div>
            <div class="seg">-</div>
            <div class="w100">
              <el-form-item :rules="items.rules2" :prop="`dateField[${index}].format`">
                <el-input @change="formatIdChange(items,2,index)" clearable
                          placeholder="请输入" v-model="items.format"></el-input>
              </el-form-item>
            </div>
            <div class="icon" @click="dataAddField">
              <el-icon size="20">
                <CirclePlus/>
              </el-icon>
            </div>
            <div class="icon" v-if="goalTableForm.tableData.convertField.length>1"
                 @click="dataDeleteField(items,index)">
              <el-icon size="20">
                <CircleClose/>
              </el-icon>
            </div>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label-align="center" label="数据转换">
          <template #label>
            <div>
              <span>数据转换</span>
              <!--            <span class="y9-required-icon">*</span>-->
            </div>
          </template>
          <div class="sync" v-for="(items,index) in goalTableForm.tableData.convertField">
            <div class="w100">
              <el-form-item :rules="items.rules1" :prop="`convertField[${index}].fieldName`">
                <el-select
                    clearable
                    v-model="items.fieldName"
                    value-key="id"
                    placeholder="请选择转换字段"
                    size="small"
                    @change="dataChange(items,1,index)"
                >
                  <el-option
                      v-for="item in targetFilteredTableFieldList"
                      :key="item.id"
                      :label="`${item.name}:${item.cname}`"
                      :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </div>
            <div class="seg">:</div>
            <div class="w100">
              <el-form-item :rules="items.rules2" :prop="`convertField[${index}].oldData`">
                <el-input @change="dataChange(items,2,index)" clearable
                          placeholder="原始数据" v-model="items.oldData"></el-input>
              </el-form-item>
            </div>
            <div class="seg">-</div>
            <div class="w100">
              <el-form-item :rules="items.rules3" :prop="`convertField[${index}].newData`">
                <el-input clearable @change="dataChange(items,3,index)"
                          placeholder="更新数据" v-model="items.newData"></el-input>
              </el-form-item>
            </div>
            <div class="icon" @click="dataAddField">
              <el-icon size="20">
                <CirclePlus/>
              </el-icon>
            </div>
            <div class="icon" v-if="goalTableForm.tableData.convertField.length>1"
                 @click="dataDeleteField(items,index)">
              <el-icon size="20">
                <CircleClose/>
              </el-icon>
            </div>
          </div>
        </el-descriptions-item>
      </div>

    </el-descriptions>
  </el-form>

  <div class="btn">
    <el-button @click="top" class="global-btn-second">上一步</el-button>
    <el-button type="primary" @click="next" class="global-btn-main">下一步</el-button>
  </div>
</template>

<style scoped lang="scss">
//webkit内核浏览器 滚动条大小
::-webkit-scrollbar {
  width: 4px;
  height: 2px;
  background-color: transparent;
}

.field {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  max-height: 120px;
  overflow-y: scroll;
  overflow-x: hidden;

  .type {
    width: 50%;
  }
}

.fetch {
  display: flex;
  align-items: center;

  .fetch-w {
    width: 35%;
  }

  .tips {
    margin-left: 20px;
    margin-top: 5px;
    color: #999999;
  }
}

.btn {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.seg {
  margin: 0 10px;
}

.sync {
  width: 100%;
  display: flex;
  align-items: center;

  .w100 {
    width: 100%;
  }

  .icon {
    color: var(--el-color-primary);
    display: flex;
    font-weight: bold;
    align-items: center;
    margin-left: 10px;
    cursor: pointer;
    margin-top: 3px;
  }
}
</style>
